<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>我的购物车</title>
    <link rel="stylesheet" th:href="@{/static/css/minireset.css}" />
    <link rel="stylesheet" th:href="@{/static/css/common.css}" />
    <link rel="stylesheet" th:href="@{/static/css/cart.css}" />
    <script language="JavaScript" th:src="@{/static/script/vue.js}"></script>
    <script language="JavaScript" th:src="@{/static/script/axios.min.js}"></script>
    <script language="JavaScript" th:src="@{/static/script/cart.js}"></script>
  </head>
  <body>
    <div class="header">
      <div class="w">
        <div class="header-left">
          <h1>我的购物车</h1>
        </div>
        <div class="header-right">
          <h3>欢迎<span th:text="${session.loginuser.User_name}">查无此人</span>光临商城</h3>
          <div class="order"><a th:href="@{/order.do(operate='getOrderList')}">我的订单 </a></div>
          <a th:href="@{/page.do?operate=page&page=login}" class="destory">注销 </a>
          <div class="gohome">
            <a th:href="@{/Commodity.do}">返回</a>
          </div>
        </div>
      </div>
    </div>
    <div class="list" id = "cart_div">
      <div class="w">
        <table>
          <thead>
            <tr>
              <th>图片</th>
              <th>商品名称</th>
              <th>数量</th>
              <th>店家</th>
              <th>单价</th>
              <th>金额</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="cartItem in cart.cartItemMap">
              <td>
                <img v-bind:src="'static/uploads/'+cartItem.commodity.commodity_IMG" alt="" />
              </td>
              <td>{{cartItem.commodity.commodity_name}}</td>

              <td>
                <input style="margin-right: 7px" type="button" value="-" class="btn" id = "reduce" @click="editCart(cartItem.cartItem_ID,cartItem.buycount-1)" :disabled="cartItem.reducelock"/>
                {{cartItem.buycount}}
                <input style="margin-left: 7px" type="button" value="+" class="btn" @click="editCart(cartItem.cartItem_ID,cartItem.buycount+1)" :disabled="cartItem.addlock"/>
              </td>
                <td>{{cartItem.commodity.saller.user_name}}</td>
              <td>{{cartItem.commodity.price}}</td>
              <td>{{cartItem.money}}</td>

              <td>
                <input type="button" value="删除" class="btn" style="border-style:none"  @click="delCart(cartItem.cartItem_ID)" />
              </td>
            </tr>
          </tbody>
        </table>
        <div class="footer">
          <div class="footer-left">
            <input type="button" value="清空购物车" class="clear-cart" style="border-style:none"  @click="delallCart()" />
          </div>
          <div class="footer-right">

            <p th:if="${session.loginuser.cart.lock==1}" style="color: #ff0000">购物车中存在已下架商品，无法结账</p>
            <div>共<span>{{cart.totalcount}}</span>件商品</div>
            <div class="total-price">总金额<span>{{cart.totalMoney}}</span>元</div>
            <div class="total-price">
              <form th:action="@{/order.do}" method="post">
                <input type="hidden" name="operate" value="checkout"/>
            下单服务:<select th:name="way" id="way">
            <option value="1">到店购买</option>
            <option value="3">快跑配送</option>
            </select>
            <button type="submit" class="pay" th:disabled="${session.loginuser.cart.lock==1}" >结账</button>
            </form>
            </div>
          </div>
        </div>
      </div>
    </div>

  </body>
</html>
